<template>
  <div class="pay">
    <div
      class="result"
      v-if="result"
    >
      <div class="result-icon">
        <img
          src="../../images/payicon.png"
          alt=""
        >
        <successHint />
      </div>
      <div class="result-icon-text">订单支付成功</div>
      <div  @click="linkto('/detailComplete?code='+id)" class="checkbutton">查看订单</div>
      <div @click="linkto('/')" class="lookbutton"> 继续逛逛</div>
    </div>
    <div
      class="result"
      v-else
    >
      <div class="result-icon">
        <img
          src="../../images/payicon2.png"
          alt=""
        >
      </div>
      <div class="result-icon-text">订单支付失败</div>
      <div class="paybutton"> 重新支付</div>
    </div>
    <div class="recommend-container">
      <div class="recommend-top">
        <div class="recomment-text">—— 热卖推荐——</div>
      </div>
      <recommend
        :array="hotList"
      ></recommend>
    </div>

  </div>

</template>
<script>
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";

import recommend from "@/components/common/recommend.vue";
import successHint from "@/components/common/successHint.vue";
export default {
  components: {
    recommend
  },
  data() {
    return {
      id:'',
      hotList:[],
      result: true
    };
  },
  mounted() {
    let { id } = this.$router.currentRoute.query;
    this.id = id;
    this.getFlow()
  },
  methods: {
    linkto(path) {
      this.$router.replace(path);
    },
    getFlow() {
     let url = CONSTANT.LIST.INDEXHOT;
      common.get(url, "", res => {
        if (res.code == 200) {
          this.hotList = res.data.bussData.products;
        }
      });
    }
  }
};
</script>
<style lang="less">
.pay {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
  .result {
    width: 7.5rem;
    height: 4.6rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    .result-icon {
      position: absolute;
      top: 0.71rem;
      border-radius: 50%;
      margin-bottom: 0.32rem;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 1.45rem;
        height: 1.45rem;
      }
    }
    .result-icon-text {
      position: absolute;
      top: 2.48rem;
      height: 0.27rem;
      font-size: 0.28rem;
      font-family: PingFang-SC-Light;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: 0.27rem;
    }
    .checkbutton {
      position: absolute;
      top: 3.42rem;
      left: 1rem;
      display: inline-block;
      width: 2.48rem;
      height: 0.72rem;
      border: 0.02rem solid rgba(126, 86, 198, 1);
      border-radius: 0.36rem;
      font-size: 0.28rem;
      font-family: PingFang-SC-Light;
      font-weight: bold;
      color: rgba(126, 86, 198, 1);
      line-height: 0.72rem;
      text-align: center;
      bottom: 0.45rem;
    }
    .lookbutton {
      .checkbutton;
      left: auto;
      right: 1.01rem;
      color: rgba(255, 255, 255, 1);
      background: rgba(126, 86, 198, 1);
    }
    .paybutton {
      .lookbutton;
      left: 2.5rem;
    }
  }
  .recommend-container {
    // width: 7.5rem;
    background: rgba(247, 247, 247, 1);
    // padding: 0  .06rem 0 .14rem  ;
    // box-sizing: border-box;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .recommend-top {
      height: 0.84rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .recomment-text {
        height: 0.27rem;
        font-size: 0.27rem;
        font-family: PingFang-SC-Light;
        font-weight: bold;
        color: rgba(102, 102, 102, 1);
        line-height: 0.27rem;
        position: relative;
        top: 0.32rem;
      }
    }
  }
}
</style>

